<template>
	<!-- 3. 通过 :class 绑定类名 -->
	<div class="btn" :class="{danger: type == 'danger', primary: type == 'primary'}" @click="btn">
		<!-- 通过插槽，用户可以修改组件的内容 -->
		<slot>按钮</slot>
	</div>
</template>

<script>
export default {
	// 1. 通过 props 接收父组件传过来的值
	props: {
		type: {
			type: String,
			// default: "danger",
		},
	},
	methods: {
		btn() {
			// console.log("子组件点击了");
			this.$emit("btnN");
			// 触发父组件上的自定义事件
		},
	},
};
</script>

<style lang="less" scoped>
.btn {
	width: 318px;
	height: 50px;
	border-radius: 25px;
	border: 1px solid #ccc;
	background-color: #ccc;
	line-height: 50px;
	text-align: center;
	margin: 5px auto;
	font-size: 20px;
	color: #fff;
}
.danger {
	background-color: #cc3300;
	border: 1px solid #cc3300;
}
.primary {
	background-color: #07c160;
	border: 1px solid #07c160;
}
</style>
